<template>
	<view>
		<!-- PC端适配 -->
		<view v-if="screenWidth > 480">
			<view class="contentrow bg-white">
				<view class="label-recommend"> 热门推荐 </view>
				<view class="sub-row">
					<view v-for="(item, index) in category" @click="SwitchVariety(index, item.Category_SerialNumber)"
						:key="index" :class="Variety == index ? 'sub text-' + ThemeColors : 'sub'"
						style="cursor: pointer">{{ item.Category_Name }}</view>
				</view>
			</view>
			<yTable :loading="loading" @row-click="handleDetail" @limitval="limitval" @pageval="pageval"
				:page="form.page" :limit="form.limit" :total="total" :tableData="tableData" height="calc(100vh - 140px)">
				<el-table-column align="center" label="商品图片" width="180">
					<template v-slot="{ row }">
						<view class="w-100 text-ellipsis flex align-center justify-center position-relative"
							:title="row.Article_Name">
							<view v-if="false" class="flex bg-success text-white flex-column" style=" width: 50rpx; height: 100%; white-space: pre-wrap; position: absolute; left: 50rpx;align-items: center; justify-content: center;border-radius: 14rpx 0 0 14rpx;">溯源</view>
							<image v-if="row.Picture_URL != void 0" style="width: 120rpx; height: 120rpx":src="Domain_IMG + row.Picture_URL" mode=""></image>
						</view>
					</template>
				</el-table-column>
				<el-table-column align="center" label="商品名称" width="180">
					<template v-slot="{ row }">
						<view class="w-100 text-ellipsis flex align-center justify-center" :title="row.Article_Name">
							<text>{{ row.Article_Name }}</text>
						</view>
					</template>
				</el-table-column>
				<el-table-column align="center" label="商品类型" width="100">
					<template v-slot="{ row }">
						<view class="w-100 text-ellipsis flex align-center justify-center" :title="row.Category_Name">
							<text>{{ row.Category_Name }}</text>
						</view>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="Total_Quantity" label="销售数量" width="180">
					<template v-slot="{ row }">
						<view class="w-100 text-ellipsis" :title="row.Total_Quantity + '/' + row.Unit">
							<text>{{ row.Total_Quantity + "/" + row.Unit }}</text>
						</view>
					</template>
				</el-table-column>
				<el-table-column align="center" label="所属企业">
					<template v-slot="{ row }">
						<view class="w-100 text-ellipsis" :title="row.Enterprise_Name">
							<text>{{ row.Enterprise_Name }}</text>
						</view>
					</template>
				</el-table-column>

				<el-table-column align="center" label="发布人">
					<template v-slot="{ row }">
						<view class="w-100 text-ellipsis" :title="row.Contacts">
							<text>{{ row.Contacts }}</text>
						</view>
					</template>
				</el-table-column>
				<el-table-column align="center" label="认证情况">
					<template v-slot="{ row }">
						<image style="width: 40rpx; height: 40rpx" src="@/static/icon/order-success.png" mode="">
						</image>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="address" :label="''">
					<template v-slot="{ row }">
						<text :class="'text-' + ThemeColors">查看详情</text>
					</template>
				</el-table-column>
			</yTable>
		</view>
		<!-- 移动端 -->
		<view v-else-if="screenWidth <= 480" class="mb-5 bg-grey">
			<view class="bg-white flex w-100 border-top border-grey" style="box-sizing: border-box; height: 80rpx">
				<view class="flex justify-center align-center border-right border-grey"
					style="position: relative; box-sizing: border-box; width: 50%">
					<text class="font">类别<i class="dropdown-arrow icon-triangle-down"></i></text>
				</view>
				<view class="flex justify-center align-center" style="position: relative; width: 50%">
					<text class="font">地区<i class="dropdown-arrow icon-triangle-down"></i></text>
				</view>
			</view>
			<!-- 列表 -->
			<view class="flex flex-column align-center my-2 pb-2" style="width: 100%">
				<view @click="handleDetail(item)" v-for="(item, index) in tableData" :key="index"
					class="flex mb-2 rounded-lg bg-white" style="width: 95%; height: 270rpx; position: relative">
					<view class="flex-shrink rounded-lg" style="height: 270rpx; width: 270rpx">
						<image class="rounded-lg" style="height: 270rpx; width: 270rpx"
							:src="Domain_IMG + item.Picture_URL" mode=""></image>
					</view>
					<view class="flex" style="width: 100%; height: 100%">
						<view class="flex flex-column justify-between m-2 w-100">
							<view style="height: 80rpx; width: 400rpx">
								<text class="font text-ellipsis-2">{{item.Group_Purchasing_Name}}</text>
							</view>
							<view class="">
								<!-- <text class="font-sm px-1 border mr-1" :class="'text-'+ThemeColors+' border-'+ThemeColors">每周采购</text> -->
								<text class="font-sm px-1 border"
									:class="'text-' + ThemeColors + ' border-' + ThemeColors">认证</text>
							</view>
							<view style="position: relative">
								<text class="font"
									:class="'text-' + ThemeColors">{{ item.Amount }}元/{{ item.Unit }}</text>
								<text class="font-sm text-muted">成交{{ item.Sell_Quantity }}吨</text>
								<!-- <text class="font-sm text-muted" style="position: absolute;right: 0;bottom: 0;">8小时前</text> -->
							</view>
							<view class="">
								<text class="font-sm text-muted">所属企业：{{ item.Enterprise_Name }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
	</view>
</template>

<script>
	const app = getApp();
	import yHeader from "@/components/yHeader.vue";
	import yFooter from "@/components/yFooter.vue";
	import yTable from "@/components/yTable.vue";
	import {
		GroupProcureAll,
		GroupProcureAllAction
	} from "@/api/group.js";
	import {
		GoodsFileInquiry
	} from "@/api/global.js";
	import {
		Message
	} from "element-ui";
	export default {
		components: {
			yHeader,
			yFooter,
			yTable,
		},
		data() {
			return {
				screenWidth: uni.getSystemInfoSync().windowWidth,
				ThemeColors: app.globalData.ThemeColors,
				Domain_IMG: app.globalData.Domain_IMG,
				Variety: 0,
				loading: true,
				form: {
					Article_Name: "",
					Category_SerialNumber: "",
					Enterprise_Info_SerialNumber: "",
					Type: "0",
					page: 1, //页数
					limit: 10, //每页数据条数
				},
				total: 0,
				category: [{
					Category_SerialNumber: "",
					Category_Name: "全部",
				}, ],
				tableData: [],
			};
		},
		mounted() {
			window.addEventListener("scroll", this.handleScroll);
			this.getData(this.form);
			this.getList();
		},
		methods: {
			handleTabs(url) {
				uni.navigateTo({
					url,
				});
			},
			handleScroll() {
				const scrollTop =
					document.documentElement.scrollTop || document.body.scrollTop;
				// 获取页面的可视高度
				const clientHeight =
					document.documentElement.clientHeight || document.body.clientHeight;
				// 获取页面的总高度
				const scrollHeight =
					document.documentElement.scrollHeight || document.body.scrollHeight;
				// 判断是否滑动到底部
				if (scrollTop + clientHeight >= scrollHeight && this.screenWidth <= 480) {
					// 执行你想要执行的函数
					if (this.total > this.tableData.length) {
						this.getData_m(this.form);
					}
				}
			},
			async getData(data) {
				//分页查询所有供应数据
				const res = await GroupProcureAllAction({
					data,
				});
				if (res.redirect && res.redirect == "REDIRECT") {
					uni.removeStorageSync("loginInfo");
					const res = await GroupProcureAll({
						data,
					});
					if (res.Status == "success") {
						this.tableData = res.tableData;
						this.total = Number(res.limit);
						this.loading = false;
					}
				} else if (res.Status == "success") {
					this.tableData = res.tableData;
					console.log(this.tableData);
					this.total = Number(res.limit);
					this.loading = false;
				}
			},
			async getData_m(data) {
				//分页查询所有供应数据
				this.form.page++;
				const res = await GroupProcureAllAction({
					data: this.form,
				});
				if (res.redirect && res.redirect == "REDIRECT") {
					uni.removeStorageSync("loginInfo");
					const res = await GroupProcureAll({
						data: this.form,
					});
					if (res.Status == "success") {
						this.tableData.push(...res.tableData);
					}
				} else if (res.Status == "success") {
					this.tableData.push(...res.tableData);
				}
			},
			async getList() {
				//类别
				const res = await GoodsFileInquiry({
					data: {
						Data: "category",
					},
				});
				this.category.push(...res);
			},
			SwitchVariety(i, Category_SerialNumber) {
				//切换品种
				if (this.form.Category_SerialNumber == Category_SerialNumber) {
					//重复点击不允许调接口
					return;
				}
				this.Variety = i;
				this.form.Category_SerialNumber = Category_SerialNumber;
				this.form.page = 1;
				this.getData(this.form);
			},
			pageval(e) {
				console.log(e);
				this.form.page = e;
				this.getData(this.form);
			},
			limitval(e) {
				this.form.page = 1;
				this.form.limit = e;
				this.getData(this.form);
			},
			handleDetail(row) {
				uni.navigateTo({
					url: "/pages/detail/supply-detail?id=" + row.Group_Purchasing_SerialNumber,
				});
			},
		},
	};
</script>

<style lang="scss">
	.content {
		width: 2400rpx;
		height: 100%;
		margin: 0 auto;
	}

	.contentrow {
		border: 1px solid #ddd;
		border-top: 0;
	}

	.label-recommend {
		font-size: 28rpx;
		color: #45b035;
		padding-left: 40rpx;
		border-bottom: 1px dashed #efefef;
		line-height: 100rpx;
	}

	.sub-row {
		display: flex;
		padding-left: 20rpx;
		border-bottom: 1px dashed #efefef;
		font-size: 28rpx;
		letter-spacing: 0.7px;
		position: relative;
		height: 100rpx;
		overflow-y: hidden;
	}

	.sub {
		transition: all 0.5s;
		padding: 20rpx 0;
		margin: 10rpx 20rpx;
		line-height: 42rpx;
	}
</style>